<template>
  <section class="app-container">
    <div class="app-container__header">
      <el-tabs class="fun-tabs" v-model="headerTabName" @tab-click="onTabClick">
        <el-tab-pane label="店铺搭建" name="TemplateBuild"></el-tab-pane>
        <el-tab-pane label="店铺配置" name="PublishingDetail"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="app-container__body is-has-header" v-loading="isLoading">
      <h3 class="block-title">店铺信息</h3>
      <el-form class="text-form" label-width="80px">
        <el-form-item label="店铺名称">
          <p class="item-p">{{publishing.name}}</p>
          <el-button type="text" class="item-a" @click="onSetName">设置名称</el-button>
        </el-form-item>
        <el-form-item label="店铺地址">
          <p class="item-p">{{publishing.linkUrl}}&nbsp;</p>
          <el-button type="text" class="item-a btn-copy" @click='handleCopy(publishing.linkUrl,$event)'>复制链接</el-button>
        </el-form-item>
        <el-form-item label="店铺Logo">
          <p class="item-p">
            <img v-if="publishing.imageUrl" :src="publishing.imageUrl" class="logo-img" />
            <img v-else src="../../assets/images/head.jpg" class="logo-img" />
          </p>
          <el-button type="text" class="item-a" @click="onSetLogo">设置logo</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="设置名称" :visible.sync="dialogNameVisible" width="700px">
        <el-form label-width="80px" v-loading="isFormLoading">
          <el-form-item label="店铺名称" :class="{error: validation.hasError('editPublishing.name')}">
            <el-input type="text" v-model="editPublishing.name" placeholder="店铺名称"></el-input>
            <span class="v-message">{{ validation.firstError('editPublishing.name') }}</span>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="onSave"> 保 存 </el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog title="设置logo" :visible.sync="dialogLogoVisible" width="700px">
      <el-form label-width="80px" v-loading="isFormLoading">
        <el-form-item label="设置logo">
          <el-upload class="logo-uploader"
                     :action="uploadAction"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="editPublishing.imageUrl != null && editPublishing.imageUrl.length>0" :src="editPublishing.imageUrl" class="logo-image" />
            <i v-else class="el-icon-plus logo-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="onSave" :disabled="editPublishing.isSave"> 保 存 </el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
  </section>
</template>
<script>
import {getPublishingDetail,savePublishing} from "../../api/publish";
import { getUploadFileRequest } from "../../api";
import clip from '@/utils/clipboard'

  export default {
    components:{},
    data(){
      return{
        headerTabName:'PublishingDetail',
        publishing:{
          linkUrl:' '
        },
        isLoading:false,
        isFormLoading:false,
        dialogNameVisible:false,
        dialogLogoVisible:false,
        editPublishing:{
          name:'',
          imageUrl:'',
          isSave:true,
        },
        uploadAction:getUploadFileRequest(),
      }
    },
    validators: {
      'editPublishing.name': function (value) {
        return this.validator.value(value).required('请填写店铺名称');
      },
    },
    methods:{
      onTabClick(tab){
        if(tab.name == 'TemplateBuild'){
          this.$router.push({ name:'TemplateSelect'});
        }
      },
      onSetName(){
        this.editPublishing = this.baseUtil.modelCopy(this.publishing);
        this.dialogNameVisible = this.editPublishing.isSave = true;
      },
      async onSave(){
        this.isFormLoading = true;
          this.$validate().then(async function (success) {
            if(success){
              let data = { publishing:this.baseUtil.modelCopy(this.editPublishing)};
              let resp = await savePublishing(data);
              if(this.qUtil.validResp(resp)){
                this.dialogNameVisible = false;
                this.$message.success("保存成功")
                this.loadData();
              }else this.$message({ message: resp.msg, type: 'warning' });
            }
            this.isFormLoading = false;
          }.bind(this))
      },
      handleCopy(text, event) {
        clip(text, event)
        //this.$message.success("已复制到剪贴板")
      },
      onSetLogo(){
        this.editPublishing = this.baseUtil.modelCopy(this.publishing);
        this.dialogLogoVisible = this.editPublishing.isSave = true;
      },
      handleAvatarSuccess(res, file) {
        this.isFormLoading = false;
        this.editPublishing.imageUrl = res.data;
        this.editPublishing.isSave = false;
      },
      beforeAvatarUpload(file) {
        this.isFormLoading = true;
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt100KB = file.size / 1024  < 100;

        if (!isJPG && !isPNG) {
          this.$message.error('分类图片只能是 JPG、PNG 格式!');
        }
        if (!isLt100KB) {
          this.$message.error('分类图片大小不能超过 100KB!');
        }
        let isOk = (isJPG||isPNG) && isLt100KB;
        if(!isOk) this.isFormLoading = false;
        return isOk;
      },
      async loadData(){
        this.isLoading = true;
        let resp = await getPublishingDetail();
        if(this.qUtil.validResp(resp)){
          this.publishing = resp.data.publishing;
        }else this.$message({ message: resp.msg, type: 'warning' });
        this.isLoading = false;
      }
    },
    mounted(){
      this.loadData();
    }
  }
</script>
<style scoped>
  .text-form .item-p{
    margin:0;
    padding:0 0 10px;
    line-height: 37px;
    border-bottom:1px solid #F2F2F2;
  }
  .text-form .item-a{
    position: absolute;
    right:10px;
    top:0;
    cursor: pointer;
    color:#2BB89A;
  }
  .text-form .logo-img{
    width:50px;
    height:50px;
    border-radius:100%;
    border:1px solid #f2f2f2;
  }
  .logo-uploader{
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
    width:112px;
    height:112px;
  }
  .logo-uploader .logo-uploader-icon {
    margin:0 auto;
    font-size: 50px;
    color: #8c939d;
    text-align: center;
    line-height: 108px;
  }
  .logo-uploader .logo-image {
    width: 112px;
    height: 112px;
    display: block;
  }
</style>
